<template>
  <div>
    <el-row>
      <span id="title"><b>结算管理</b></span>
    </el-row>

    <el-row class="shaixuan_1"
            type="flex"
            align="middle"
            style="text-align: center">
      <el-col :span="3">
        <span>结算数据</span>
      </el-col>
      <el-col :span="3"
              :offset="4">
        <el-button type="primary">导出数据</el-button>
      </el-col>
      <el-col :span="3">
        <el-button>全部</el-button>
      </el-col>
      <el-col :span="3">
        <el-button>最近一周</el-button>
      </el-col>
      <el-col :span="3">
        <el-button>最近30天</el-button>
      </el-col>
      <el-col :span="5">
        <el-date-picker v-model="value1"
                        type="date"
                        placeholder="选择日期">
        </el-date-picker>
      </el-col>
    </el-row>

    <el-row type="flex"
            align="middle"
            class="shaixuan_20"
            style="text-align: center">
      <el-col :span="12"><b><span class="countComputed">待结算金额<div>{{unsettleCostSum}}</div></span></b></el-col>
      <el-col :span="12"><b><span class="countComputed">可用金额<div>{{availableFunds}}</div></span></b></el-col>

    </el-row>
    <el-row type="flex"
            align="middle"
            id="data_1">
      <el-col>
        <i class="iconfont icon-querylist"></i>
        <span>数据列表</span>
      </el-col>
    </el-row>
    <el-row>
      <el-menu default-active="/index/settleManagement/settleRecord"
               mode="horizontal"
               router>
        <el-menu-item index="/index/settleManagement/settleRecord"
                      class="menu">结算记录</el-menu-item>
        <el-menu-item index="/index/settleManagement/balanceRecord"
                      class="menu">余额记录</el-menu-item>
      </el-menu>
    </el-row>
    <el-row>
      <router-view></router-view>
    </el-row>
  </div>
</template>
<script>

export default {
  data () {
    return {
      unsettleCostSum: 0,
      availableFunds: 0
    }
  },
  created () {
    this.$axios.get("/financial/settlement/unsettleCostSum").then(res => {
      if (res.data.code === 200) {
        this.unsettleCostSum = res.data.data
      }
    }),
      this.$axios.get("/financial/transfer/availableFunds").then(res => {
        if (res.data.code === 200) {
          this.availableFunds = res.data.data
        }
      })
  }

}
</script>
<style scoped>
#title {
  font-size: 30px;
}
.shaixuan_1 {
  margin-top: 20px;
  margin-bottom: 20px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  background-color: rgb(241, 241, 241);
}
.shaixuan_2 {
  height: 50px;
}
#data_1 {
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  background-color: rgb(241, 241, 241);
}
.menu {
  width: 50%;
  text-align: center;
}
.countComputed {
  font-size: 2em;
}
</style>